<!DOCTYPE html>
<html lang="en">

<head>
    <title>贝康</title>
    <#include "/ayi/components/meta.html" />
    <#include "/ayi/components/stylesheets.html" />
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" type="text/css" href="/ayi/stylesheets/booking.css?v=4">
</head>

<body class="theme-background-color-2">
    <div class="booking-close">
        <!-- <a href="javascript:history.back(-1)" class="theme-color-2"><i class="am-icon-close"></i></a> -->
    </div>
    <!-- <div class="booking-icon theme-color-2">
        <img src="https://i.loli.net/2018/08/06/5b67b236a5671.png" width="100" />
    </div> -->
    <!-- <div class="booing-form">
        <div class="am-form-group am-form-icon booking-form-field">
            <img src="https://i.loli.net/2018/08/06/5b67b8e755a0c.png">
            <input type="text" class="am-form-field am-round" placeholder="请输入您的姓名" id="userName" />
        </div>
        <div class="am-form-group am-form-icon booking-form-field">
            <img src="https://i.loli.net/2018/08/06/5b67b8e756f6a.png">
            <input type="number" class="am-form-field am-round" placeholder="请输入您的联系电话" id="mobile" />
        </div>
        <div class="am-form-group am-form-icon booking-form-field">
            <img src="https://i.loli.net/2018/08/06/5b67b8e752243.png">
            <input type="text" class="am-form-field am-round" placeholder="请选择城市" id='city-picker' value="广东 珠海 香洲区" />
            <img src="https://i.loli.net/2018/08/06/5b67b8e753b56.png">
        </div>
        <div class="am-form-group am-form-icon booking-form-field">
            <img src="https://i.loli.net/2018/08/06/5b67b8e758317.png">
            <input type="text" class="am-form-field am-round" placeholder="请选择时间" id='date-picker' value="${today}" />
            <img src="https://i.loli.net/2018/08/06/5b67b8e753b56.png">
        </div>
        <div class="booking-form-button">
            <button type="button" class="am-btn am-btn-default am-round theme-background-color-2 theme-color-1" id="submitButton">立即预定</button>
        </div>
    </div> -->
    <div class="booing-form">
        <div class="am-form-group am-form-icon booking-form-field">
            <input type="text" placeholder="您的姓名" id="userName" />
            <div class="underline"></div>
        </div>
        <div class="am-form-group am-form-icon booking-form-field">
            <input type="number" placeholder="联系电话" id="mobile" />
            <div class="underline"></div>
        </div>
        <div class="am-form-group am-form-icon booking-form-field">
            <input type="text" placeholder="所在城市" id='city-picker' value="广东 珠海 香洲区" />
            <div class="underline"></div>
            <img src="https://i.loli.net/2018/08/09/5b6bde1f6da93.png" />
        </div>
        <div class="am-form-group am-form-icon booking-form-field">
            <input type="text" placeholder="上户时间" id='date-picker' value="${today}" />
            <div class="underline"></div>
            <img src="https://i.loli.net/2018/08/09/5b6bde1f6da93.png" />
        </div>
        <div class="booking-form-button">
            <button type="button" class="am-btn am-btn-default theme-background-color-1 theme-color-2" id="submitButton">点击提交</button>
        </div>
    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script>
    $("#city-picker").cityPicker({
        toolbarTemplate: '<header class="bar bar-nav">\
    <button class="button button-link pull-right close-picker">确定</button>\
    <h3 class="title">选择城市</h3>\
    </header>'
    });
    $("#date-picker").calendar({
        value: ['${today}'],
        inputReadOnly: true,
        dateFormat: 'yyyy-mm-dd'
    });
    </script>
    <script type="text/javascript">
    $("#submitButton").click(function() {
        // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        // var qs = require('qs');
        var name = $('#userName').val();
        var mobile = $('#mobile').val();
        var city = $('#city-picker').val();
        var date = $('#date-picker').val();
        if (name == '') {
            alert("请输入姓名");
            return;
        }
        if (mobile == '') {
            alert("请输入联系电话");
            return;
        }
        if (city == '') {
            alert("请选择城市");
            return;
        }
        if (date == '') {
            alert("请输入时间");
            return;
        } else if (date < '${today}') {
            alert("日期不能小于今天");
            return;
        }

        var data = {
            id: '${id}',
            name: name,
            mobile: mobile,
            city: city,
            date: date,
        }
        var query = Qs.stringify(data);
        var url = '/ay/submit'
        axios({
            method: 'POST',
            headers: { 'content-type': 'application/x-www-form-urlencoded' },
            params: data,
            url: url,
        })
        .then(function(response) {
            console.log(response);
            var status = response.data.status
            if (status == 200) {
                // window.location.href = "/ay/result";
                parent.layer.closeAll();
                parent.layer.msg("预约成功");
            } else {
                alert('提交失败')
            }
        })
        .catch(function(error) {
            console.log(error);
        });
    });
    </script>
</body>

</html>